<template>
  <div class="app-container">
    <div class="head-container">
      <el-input
          v-model="listQuery.keyword"
          clearable
          placeholder="关键词"
          style="width: 200px;"
          class="filter-item"
          @keyup.enter="handleFilter"
          @clear="handleFilter"
      />

      <el-date-picker
          v-model="time"
          type="datetimerange"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          class="filter-item"
          @change="changeTime"
      />

      <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="search"
          @click="handleFilter"
      >搜索
      </el-button>
    </div>

    <el-table
        v-loading="listLoading"
        :data="list"
        element-loading-text="Loading"
        fit
        stripe
        highlight-current-row
        style="width: 100%;"
    >
      <el-table-column type="expand">
        <template v-slot="props">
          <el-form label-position="left">
            <el-form-item label="请求方法:">
              <span>{{ props.row.method }}</span>
            </el-form-item>
            <el-form-item label="请求参数:">
              <span>{{ props.row.params }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>

      <el-table-column prop="id" label="ID" align="left"/>
      <el-table-column prop="username" label="用户名"/>
      <el-table-column prop="ip" label="IP"/>
      <el-table-column prop="address" label="来源"/>
      <el-table-column prop="description" label="描述"/>
      <el-table-column prop="browser" label="浏览器"/>
      <el-table-column label="请求耗时">
        <template v-slot="{row}">{{ row.time }}ms</template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间"/>
      <el-table-column label="异常详情" width="100px">
        <template v-slot="scope">
          <el-button type="text" @click="info(scope.row.id)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
        v-show="total>0"
        :total="total"
        v-model:page="listQuery.page"
        v-model:limit="listQuery.size"
        @pagination="getList"
    />

    <el-dialog v-model="dialogVisible" title="异常详情" append-to-body top="30px" width="85%">
      <pre>{{ errorInfo }}</pre>
    </el-dialog>
  </div>

</template>

<script>
import {
  errorList as listLogs, getErrorDetail
} from '@/api/logs'
import Pagination from '@/components/Pagination'
import {parseTime} from "@/utils"; // secondary package based on el-pagination

export default {
  name: 'ErrorLog',
  components: {Pagination},
  data() {
    return {
      dialogVisible: false,
      errorInfo: null,
      list: [],
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        size: 10,
        keyword: undefined,
        startTime: null,
        endTime: null
      },
      time: ''
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.listLoading = true
      listLogs(this.listQuery).then(response => {
        this.list = response.rows
        this.total = response.total
        this.listLoading = false
      })
    },

    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },

    changeTime() {
      if (this.time === null) {
        this.listQuery.startTime = null
        this.listQuery.endTime = null
      } else {
        this.listQuery.startTime = parseTime(this.time[0])
        this.listQuery.endTime = parseTime(this.time[1])
      }
    },

    info(id) {
      this.dialogVisible = true
      getErrorDetail(id).then(res => {
        this.errorInfo = res.exceptionDetail
      })
    }

  }
}
</script>
